<template>
  <view class="assess">
    <progressCom v-if="uName" :uName="uName" :uSex="uSex" :uAge="uAge"></progressCom>
    <view class="bodyBox">
      <!-- 第1-3题 -->
      <view v-if="ajaxRes" class="bodyBoxPos">
        <ajaxMessage :uName="uName"></ajaxMessage>
      </view>

      <view v-show="!ajaxRes">
        <view v-show="active === 0">
          <inputCom v-if="hasLoaded" :uName="uName" :uAge="uAge" :uSex="uSex" @getUserInfo="getUserInfo"></inputCom>
        </view>

        <!-- 原来第4题 -->

        <view v-show="active === 1">
          <checkBoxCom :uSex="uSex"></checkBoxCom>
        </view>

        <!-- <view v-if="activePass > 0">
          <view v-show="active === 3">
            <checkBoxComB></checkBoxComB>
          </view>
        </view> -->

        <view v-show="active === 2">
          <radioComList :radioList="uSex === '男' ? dataPage3.slice(0, -1) : dataPage3" :uSex="uSex"></radioComList>
        </view>

        <!-- <view v-if="activePass > 1">
          <view v-show="4 <= active < 8 || active === 10 || 12 <= active <= 16 || 18 <= active <= 19 || active === 23">
            <view v-for="(item, index) in radioData" :key="index">
              <radioCom v-show="active === item.pageNum" :info="item" :uSex="uSex"></radioCom>
            </view>
          </view>
        </view> -->

        <!-- 第四页 9-20题-->
        <view v-show="active === 3">
          <quesPage4 :quesList="dataPage4"></quesPage4>
        </view>

        <view v-show="active === 4">
          <quesPage5 :quesList="dataPage5"></quesPage5>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import progressCom from '@/components/progress';
import inputCom from './inputCom';
import checkBoxCom from './checkBoxCom';
import curIcon from '@/static/icon/cur.png';

import radioComList from './radioComList';
import quesPage4 from './quesPage4';
import quesPage5 from './quesPage5';

import ajaxMessage from './ajaxMessage';
import { getUserInfoByPatientId } from '@/api/join.js';
import { getAge } from '@/utils/optimize';
import { mapGetters } from 'vuex';
export default {
  components: {
    ajaxMessage,
    // 头部参评人员及进度条组件
    progressCom,
    // 第1-2题 input组件
    inputCom,
    radioComList,
    quesPage4,
    quesPage5,
    checkBoxCom
  },
  data() {
    return {
      curIcon,
      sexItem: [
        {
          name: '男',
          value: 1
        },
        {
          name: '女',
          value: 0
        }
      ],
      dataPage3: [
        {
          // 第6题
          key: 'dysphagia',
          name: '目前是否有进食哽咽感或吞咽困难的感觉？',
          pageNum: 4, // 在第几页展示
          options: [
            { name: '是', id: 1 },
            { name: '否', id: 0 }
          ],
          tips: '',
          value: ''
        },
        {
          // 第7题
          key: 'stoolAbnormity',
          name: '近期大便是否有异常？',
          pageNum: 5,
          options: [
            { name: '是', id: 1 },
            { name: '否', id: 0 }
          ],
          tips: '大便习惯改变包括：腹泻与便秘交替出现，排便次数、大便性状、排便量等',
          value: ''
        },
        {
          // 第8题
          key: 'rightUpperQuadrantPain',
          name: '右上腹（肝区）是否有阵发性疼痛？',
          pageNum: 6,
          options: [
            { name: '是', id: 1 },
            { name: '否', id: 0 }
          ],
          tips: '',
          value: ''
        },
        {
          // 第x题
          key: 'breastLump',
          name: '乳腺是否有不适或肿块？',
          pageNum: 7,
          options: [
            { name: '是', id: 1 },
            { name: '否', id: 0 }
          ],
          tips: '',
          value: ''
        }
      ],
      dataPage4: [
        {
          // 第x题
          rowBlock: true,
          key: 'drink',
          name: '您是否经常饮酒？',
          pageNum: 8, // 在第几页展示
          options: [
            { name: '几乎从不', id: 10, tips: '' },
            { name: '偶尔', id: 20, tips: '' },
            {
              name: '经常且少量',
              id: 30,
              tips: '每日饮酒量：啤酒不超过250ml,或葡萄酒不超过100ml，或白酒不超过一两'
            },
            {
              name: '经常且中量',
              id: 40,
              tips: '每日饮酒量：啤酒250-500ml，或葡萄酒100-200ml，或白酒一两到二两'
            },
            {
              name: '长期嗜酒',
              id: 50,
              tips: '每日饮酒量：啤酒大于500ml，或葡萄酒大于200ml，或白酒大于二两'
            }
          ],
          tips: '',
          value: ''
        },
        {
          // 第11题
          rowBlock: true,
          key: 'smok',
          name: '您是否吸烟？',
          pageNum: 9, // 在第几页展示
          options: [
            { name: '从未', id: 10, tips: '' },
            { name: '不吸烟但经常吸二手烟', id: 20, tips: '' },
            { name: '已戒烟', id: 30 },
            { name: '吸烟', id: 40 }
          ],
          tips: '',
          value: ''
        },
        {
          // 第12题
          key: 'vegetableFruit',
          name: '是否经常食用新鲜蔬菜和水果？',
          pageNum: 10,
          options: [
            { name: '几乎从不', id: 10 },
            { name: '偶尔', id: 20 },
            { name: '经常', id: 30 }
          ],
          tips: '',
          value: ''
        },
        {
          // 多选组件的题目通用测试数据
          key: 'dietaryHabit',
          name: '饮食口味是？(可多选)',
          pageNum: 11,
          rowHalf: true, // 样式选项占半行
          options: [
            { name: '偏咸', id: 1 },
            { name: '偏甜', id: 2 },
            { name: '清淡', id: 8 },
            { name: '偏油', id: 4 }
          ],
          tips: '',
          value: '',
          require: true
        },
        {
          // 第12题
          key: 'meatVegetable',
          name: '饮食中荤素占比如何？',
          pageNum: 12,
          options: [
            { name: '偏荤', id: 10 },
            { name: '偏素', id: 20 },
            { name: '荤素搭配', id: 30 }
          ],
          tips: '',
          value: ''
        },
        {
          // 第14题
          key: 'stapleFood',
          name: '吃主食时是否粗细搭配？',
          pageNum: 13,
          options: [
            { name: '是', id: 1 },
            { name: '否', id: 0 }
          ],
          tips: '',
          value: ''
        },
        {
          // 第15题
          key: 'eatMeat',
          name: '食用肉食的类型是？',
          rowBlock: true,
          pageNum: 14, // 在第几页展示
          options: [
            { name: '以猪牛羊肉等红肉为主', id: 10, tips: '' },
            { name: '以鸡鸭鱼肉等白肉为主', id: 20, tips: '' },
            { name: '红白搭配', id: 30, tips: '' },
            { name: '不吃肉', id: 40, tips: '' }
          ],
          tips: '',
          value: ''
        },
        {
          // 第16题
          key: 'drinking',
          name: '每天喝多少水？',
          rowBlock: true,
          pageNum: 15, // 在第几页展示
          options: [
            { name: '口渴了才会喝水', id: 10, tips: '' },
            { name: '每天主动喝水1-2杯', id: 20, tips: '按每杯容量300ml折算' },
            { name: '每天主动喝水3-4杯', id: 30, tips: '按每杯容量300ml折算' },
            {
              name: '每天主动喝水5杯及以上',
              id: 40,
              tips: '按每杯容量300ml折算'
            }
          ],
          tips: '',
          value: ''
        },
        {
          // 第17题
          key: 'isExercise',
          name: '您是否经常参加中等强度以上的运动？',
          rowBlock: true,
          pageNum: 16, // 在第几页展示
          options: [
            {
              name: '几乎从不',
              id: 10,
              tips: '一周内基本没有一天达到或超过20分钟的运动'
            },
            {
              name: '偶尔',
              id: 20,
              tips: '每周1-2次达到和超过20分钟以上的专门运动'
            },
            {
              name: '经常',
              id: 30,
              tips: '每周3次以上达到和超过20分钟的专门运动'
            },
            {
              name: '总是',
              id: 40,
              tips: '几乎每天都达到和超过20分钟的专门运动'
            }
          ],
          tips: '持续20分钟以上的慢跑、快走、骑车、游泳、跳舞或专项训练等',
          value: ''
        },
        {
          // 第18题
          rowBlock: true,
          key: 'exerciseMode',
          name: '您的运动方式有哪些？（可多选）',
          pageNum: 17, // 在第几页展示
          options: [
            { name: '步行', id: 1, tips: '' },
            { name: '快走', id: 2, tips: '' },
            { name: '骑车', id: 4 },
            { name: '游泳', id: 8 },
            { name: '跑步', id: 16 },
            { name: '瑜伽', id: 32 },
            { name: '登山', id: 64 },
            { name: '球类运动', id: 128 },
            { name: '核心/力量训练', id: 256 },
            { name: '其他', id: 512 }
          ],
          require: true,
          tips: '',
          value: ''
        },
        {
          key: 'sleepTime',
          name: '您每天的睡眠时长？',
          pageNum: 18, // 在第几页展示
          options: [
            { name: '不足6个小时', id: 10, tips: '' },
            { name: '6-7个小时', id: 20, tips: '' },
            { name: '7-8个小时', id: 30, tips: '' },
            { name: '8个小时以上', id: 40, tips: '' }
          ],
          tips: '',
          value: ''
        },
        {
          key: 'stress',
          name: '你觉得目前压力大吗？',
          pageNum: 19, // 在第几页展示
          options: [
            { name: '没有压力', id: 10, tips: '' },
            { name: '一般压力', id: 20, tips: '' },
            { name: '很大压力', id: 30, tips: '' },
            { name: '几乎崩溃', id: 40, tips: '' }
          ],
          tips: '',
          value: ''
        }
      ],
      dataPage5: [],
      radioData: [
        // {
        //   // 第12题
        //   key: 'vegetableFruit',
        //   name: '是否经常食用新鲜蔬菜和水果？',
        //   pageNum: 10,
        //   options: [
        //     { name: '几乎从不', id: 10 },
        //     { name: '偶尔', id: 20 },
        //     { name: '经常', id: 30 }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   // 第12题
        //   key: 'meatVegetable',
        //   name: '饮食中荤素占比如何？',
        //   pageNum: 12,
        //   options: [
        //     { name: '偏荤', id: 10 },
        //     { name: '偏素', id: 20 },
        //     { name: '荤素搭配', id: 30 }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   // 第13题
        //   key: 'dietaryHabit',
        //   name: '饮食口味是？',
        //   pageNum: 10,
        //   options: [
        //     { name: '偏咸', id: 1 },
        //     { name: '偏甜', id: 2 },
        //     { name: '清淡', id: 8 },
        //     { name: '偏油或偏荤', id: 4 },
        //     { name: '偏素', id: 16 },
        //     { name: '有荤有素', id: 32 }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   // 第14题
        //   key: 'stapleFood',
        //   name: '吃主食时是否粗细搭配？',
        //   pageNum: 13,
        //   options: [
        //     { name: '是', id: 1 },
        //     { name: '否', id: 0 }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   // 第15题
        //   key: 'eatMeat',
        //   name: '食用肉食的类型是？',
        //   rowBlock: true,
        //   pageNum: 14, // 在第几页展示
        //   options: [
        //     { name: '以猪牛羊肉等红肉为主', id: 10, tips: '' },
        //     { name: '以鸡鸭鱼肉等白肉为主', id: 20, tips: '' },
        //     { name: '红白搭配', id: 30, tips: '' },
        //     { name: '不吃肉', id: 40, tips: '' }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   // 第16题
        //   key: 'drinking',
        //   name: '每天喝多少水？',
        //   rowBlock: true,
        //   pageNum: 15, // 在第几页展示
        //   options: [
        //     { name: '口渴了才会喝水', id: 10, tips: '' },
        //     { name: '每天主动喝水1-2杯', id: 20, tips: '按每杯容量300ml折算' },
        //     { name: '每天主动喝水3-4杯', id: 30, tips: '按每杯容量300ml折算' },
        //     {
        //       name: '每天主动喝水5杯及以上',
        //       id: 40,
        //       tips: '按每杯容量300ml折算'
        //     }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   key: 'isExercise',
        //   name: '您是否经常参加中等强度以上的运动？',
        //   rowBlock: true,
        //   pageNum: 16, // 在第几页展示
        //   options: [
        //     {
        //       name: '几乎从不',
        //       id: 10,
        //       tips: '一周内基本没有一天达到或超过20分钟的运动'
        //     },
        //     {
        //       name: '偶尔',
        //       id: 20,
        //       tips: '每周1-2次达到和超过20分钟以上的专门运动'
        //     },
        //     {
        //       name: '经常',
        //       id: 30,
        //       tips: '每周3次以上达到和超过20分钟的专门运动'
        //     },
        //     {
        //       name: '总是',
        //       id: 40,
        //       tips: '几乎每天都达到和超过20分钟的专门运动'
        //     }
        //   ],
        //   tips: '持续20分钟以上的慢跑、快走、骑车、游泳、跳舞或专项训练等',
        //   value: ''
        // },
        // {
        //   // 第19题
        //   key: 'sleepTime',
        //   name: '您每天的睡眠时长？',
        //   pageNum: 18, // 在第几页展示
        //   options: [
        //     { name: '不足6个小时', id: 10, tips: '' },
        //     { name: '6-7个小时', id: 20, tips: '' },
        //     { name: '7-8个小时', id: 30, tips: '' },
        //     { name: '8个小时以上', id: 40, tips: '' }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        // {
        //   key: 'stress',
        //   name: '你觉得目前压力大吗？',
        //   pageNum: 19, // 在第几页展示
        //   options: [
        //     { name: '没有压力', id: 10, tips: '' },
        //     { name: '一般压力', id: 20, tips: '' },
        //     { name: '很大压力', id: 30, tips: '' },
        //     { name: '几乎崩溃', id: 40, tips: '' }
        //   ],
        //   tips: '',
        //   value: ''
        // },
        {
          key: 'hPylori',
          name: '是否进行过幽门螺杆菌检查？若做过，结果如何？',
          pageNum: 23, // 在第几页展示
          options: [
            { name: '阳性', id: 10, tips: '' },
            { name: '阴性', id: 20, tips: '' },
            { name: '没测过', id: 30, tips: '', isPassCheck: true }
          ],
          tips: '',
          value: ''
        }
      ],
      radioDataSmoke: [
        {
          // 第11题
          rowBlock: true,
          key: 'smok',
          name: '您是否吸烟？',
          pageNum: 9, // 在第几页展示
          options: [
            { name: '从未', id: 10, tips: '' },
            { name: '不吸烟但经常吸二手烟', id: 20, tips: '' },
            { name: '已戒烟', id: 30 },
            { name: '吸烟', id: 40 }
          ],
          tips: '',
          value: ''
        }
      ],
      radioDataPlay: [
        {
          // 第18题
          rowBlock: true,
          key: 'exerciseMode',
          name: '您的运动方式有哪些？（可多选）',
          options: [
            { name: '步行', id: 1, tips: '' },
            { name: '快走', id: 2, tips: '' },
            { name: '骑车', id: 4 },
            { name: '游泳', id: 8 },
            { name: '跑步', id: 16 },
            { name: '瑜伽', id: 32 },
            { name: '登山', id: 64 },
            { name: '球类运动', id: 128 },
            { name: '核心/力量训练', id: 256 },
            { name: '其他', id: 512 }
          ],
          require: true,
          tips: '',
          value: ''
        }
      ],
      // 多选组件数据
      checkComData: [
        {
          // 多选组件的题目通用测试数据
          key: 'dietaryHabit',
          name: '饮食口味是？(可多选)',
          pageNum: 11,
          rowHalf: true, // 样式选项占半行
          options: [
            { name: '偏咸', id: 1 },
            { name: '偏甜', id: 2 },
            { name: '清淡', id: 8 },
            { name: '偏油', id: 4 }
          ],
          tips: '',
          value: '',
          require: true
        }
      ],
      radioDataCheck: [
        {
          // 第13题
          rowBlock: true,
          key: 'dietaryHabit',
          name: '饮食口味是？',
          pageNum: 12, // 在第几页展示
          options: [
            { name: '偏咸', id: 1, tips: '' },
            { name: '偏甜', id: 2, tips: '' },
            { name: '清淡', id: 8 },
            { name: '偏油或偏荤', id: 4 },
            { name: '偏素', id: 16 },
            { name: '有荤有素', id: 32 }
          ],
          tips: '',
          value: ''
        }
      ],
      uName: '',
      uSex: '',
      uAge: '',
      formData: {},
      hasLoaded: false
    };
  },
  computed: {
    // active很重要，当前第几步了
    ...mapGetters(['active', 'activePass', 'ajaxRes']),
    assessPatientId() {
      return this.$store.getters.assessPatientId || wx.getStorageSync('assessPatientId');
    }
  },
  onLoad() {
    this.getUserInfo();
  },
  watch: {
    active(newVal, oldVal) {
      if (newVal > oldVal) {
        this.$store.commit('assessQuestion/SET_ACTIVEPASS', newVal);
      }
    }
  },
  methods: {
    proPage() {},
    nextPage() {},
    async getUserInfo() {
      const { data: userInfo } = await getUserInfoByPatientId(this.assessPatientId);
      this.userInfo = userInfo;
      this.uSex = userInfo.sex === 1 ? '男' : userInfo.sex === 0 ? '女' : '';
      this.uName = userInfo.name;
      this.uAge = userInfo.birthday ? (getAge(userInfo.birthday) > -1 ? getAge(userInfo.birthday) : '') : '';
      this.$store.commit('assessQuestion/SET_USERSEX', this.uSex);
      this.hasLoaded = true;
    }
  }
};
</script>
<style lang="scss">
@import './../style/assessStyle.scss';
.assess {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: $uni-fixed-button-parent-padding-bottom;
  .bodyBox {
    margin: 24rpx;
    border-radius: 16rpx;
    // overflow: hidden;
    position: relative;
    margin-bottom: 60rpx;
    .bodyBoxPos {
      width: 100%;
      height: 100%;
      z-index: 99;
    }
  }
}
</style>
